<template>
  <view>
    <view
      v-if="total > 0"
      class="adopt-diary"
    >
      <view class="diary-list flex align-center">
        <image
          src="../../../static/detail/diary.png"
          style="width: 80rpx; height: 80rpx"
        ></image>
        <view class="diary-count">
          <view class="count-text">
            共
            <text class="count">{{ total }}篇</text>
            日记
          </view>
          <view class="diary-descript">该日记仅云认养小主有权利查看</view>
        </view>
      </view>
      <!--日记-->
      <view
        v-for="item in diaryList"
        :key="item.id"
        class="list"
      >
        <view
          class="diary-item"
          :class="{ 'is-first-year': item.isFirstYear, 'is-last': item.isLast }"
        >
          <view class="diary-item--header">
            <view
              v-if="item.isFirstYear || item.isFirstDate"
              class="diary-item--year"
            >
              <text class="day">{{ item.createDay }}</text>
              <view class="other">
                <text class="month">{{ item.createMonth }}</text>
                <text
                  v-if="
                    item.isToday ||
                      item.isYesterday ||
                      (item.isFirstDate && !item.isCurrentYear)
                  "
                >
                  ·
                </text>
                <text v-if="item.isToday">今天</text>
                <text v-else-if="item.isYesterday">昨天</text>
                <text v-else-if="item.isFirstDate && !item.isCurrentYear">
                  {{ item.createYear.slice(2, 4) }}
                </text>
              </view>
            </view>
            <view class="diary-item--time flex align-center">
              <view class="icon"></view>
              {{ item.releaseTime }}
            </view>
          </view>
          <view class="diary-item--content">
            <view class="detail">
              {{ item.content }}
            </view>
            <view class="image-container">
              <view
                v-for="(file, index) in item.files"
                :key="index"
                class="img-files"
                @click="previewImage(item.files, index)"
              >
                <text
                  v-if="file.type === 'video'"
                  class="iconfont icon-zuojiantou is-video"
                  style="color: #fff; font-size: 12px"
                ></text>
                <image
                  :src="file.poster"
                  class="img-item"
                  mode="aspectFill"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view
      v-else
      style="margin: 160rpx 0px"
    >
      <u-empty
        icon="/static/detail/no_cloud_diary@2x.png"
        text="工作人员捕捉猫咪精彩瞬间中，即将为您呈现～"
      />
    </view>
    <preview-file
      v-model="previewvisible"
      :preview-index="previewIndex"
      :file-list="filesList"
      pet-type="diary"
    ></preview-file>
  </view>
</template>

<script>
import { selectAdoptDiary } from '@/api/detail.js';
import { formatToDate } from '@/utils/tools';
import previewFile from './previewFile.vue';
export default {
  components: {
    previewFile,
  },
  props: {
    list: Object,
  },
  data() {
    return {
      page: {
        current: 1,
        size: 10000,
      },
      previewvisible: false,
      diaryList: [],
      total: '',
      filesList: [],
      lastItem: {
        firstYear: '',
        firstDate: '',
      },
      previewIndex: '',
    };
  },
  watch: {
    list: {
      immediate: true, // 立即触发回调函数，即使没有变化
      handler(val) {
        if (val && val.id) {
          this.selectDiaryList();
        }
      },
    },
  },
  methods: {
    //预览
    previewImage(file, index) {
      console.log('fff', file);
      this.filesList = file || [];
      this.previewvisible = true;
      this.previewIndex = index;
    },
    async selectDiaryList() {
      try {
        const params = {
          ...this.page,
          petId: this.list.id,
        };
        const { data } = await selectAdoptDiary(params);
        // this.diaryList = data.records || [];
        const currYear = new Date().getFullYear().toString();

        const currDate = formatToDate(new Date(), 'YYYY年MM月DD');
        let firstYear = this.lastItem.firstYear;
        let firstDate = this.lastItem.firstDate;
        const len = data.records.length;
        data.records.forEach((item, index) => {
          // 如果是当年，则只显示月日，否则显示年月日，以及分拆成两个字段，用于展示，
          const itemYear = formatToDate(item.releaseTime, 'YYYY');
          const createDate = formatToDate(item.releaseTime, 'YYYY年MM月DD');
          if (itemYear === currYear) {
            item.isCurrentYear = true;
            item.createDate = formatToDate(item.releaseTime, 'MM月DD');
          } else {
            item.createDate = createDate;
          }
          item.createYear = itemYear;
          item.createMonth = formatToDate(item.releaseTime, 'MM月');
          item.createDay = formatToDate(item.releaseTime, 'DD');

          if (!firstDate || firstDate !== item.createDate) {
            item.isFirstDate = true;
            firstDate = item.createDate;
          } else {
            item.firstDate = false;
          }
          // 是否为今天
          if (currDate === createDate) {
            item.isToday = true;
          }

          // 是否为昨天
          if (
            createDate ===
            formatToDate(
              new Date(new Date().getTime() - 24 * 60 * 60 * 1000),
              'YYYY年MM月DD'
            )
          ) {
            item.isYesterday = true;
          }
          // 是否与上一条数据为同一天
          item.releaseTime = formatToDate(item.releaseTime, 'HH:mm');
          // 如果为空表示为第一条数据
          if (!firstYear || firstYear !== itemYear) {
            item.isFirstYear = true;
            firstYear = itemYear;
          } else {
            // 否则为假
            item.isFirstYear = false;
          }
          if (index === len - 1) {
            item.isLast = true;
          }
          item.files = JSON.parse(item.files);
        });
        this.diaryList = data.records || [];
        this.lastItem.firstYear = firstYear;
        this.lastItem.firstDate = firstDate;

        this.total = data.total;
      } catch (e) {
        throw new Error(e);
      }
    },
  },
};
</script>

<style lang="scss">
::v-deep .u-image__image {
  width: 100% !important;
}
.adopt-diary {
  .image-container {
    display: flex;
    flex-wrap: wrap;
    .is-video {
      position: absolute;
      width: 24px;
      height: 24px;
      background: #00000080;
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      right: 4px;
      top: 4px;
    }
    .img-files {
      position: relative;
      width: calc(33.3% - 4px);
      margin-right: 4px;
      .img-item {
        width: 100%;
        height: 100px;
        border-radius: 8px;
        overflow: hidden;
        box-sizing: border-box;
      }
    }
  }
  .diary-list {
    background-image: linear-gradient(
      90deg,
      #ffe7f8 1%,
      #ffeafa 42%,
      #ffdef4 100%
    );
    border-radius: 24rpx;
    padding: 24rpx;
    box-sizing: border-box;
    .diary-count {
      margin-left: 12rpx;
      line-height: 46rpx;
      .count-text {
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        .count {
          font-weight: 600;
          font-size: 14px;
          color: #e500b4;
        }
      }
      .diary-descript {
        font-weight: 400;
        font-size: 12px;
        color: #333333;
      }
    }
  }
  .list {
    margin-top: 44rpx;
    .diary-item {
      position: relative;

      &--year {
        width: 43px;
        color: #130b00;
        height: 43px;
        background-image: linear-gradient(
          0deg,
          #fff 40%,
          $btn-primary-color 88%,
          #c0f5b3 100%
        );
        border-radius: 100%;
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        text-align: center;
        padding: 0;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
        letter-spacing: -1px;

        .day {
          font-size: 24px;
          font-weight: bold;
          display: block;
          letter-spacing: -2px;
        }

        .other {
          text {
            font-size: 10px;
            color: #666666;
          }
        }

        .month {
          font-size: 10px;
          color: #666;
          padding-top: 4px;
        }
      }

      &--time {
        font-weight: bold;
        font-size: 14px;
        letter-spacing: -1px;

        .icon {
          width: 14px;
          height: 14px;
          background-color: #a9f48d;
          border-radius: 100%;
          overflow: hidden;
          position: relative;
          margin-right: 5px;

          &::before {
            content: '';
            position: absolute;
            width: 3px;
            height: 3px;
            left: 6px;
            top: 4px;
            border-left: 2px solid #333;
            border-bottom: 2px solid #333;
          }
        }
      }

      &--content {
        background: #fafafa;
        border-radius: 8px;
        padding: 12px;
        margin: 10px 0 10px 20px;
        position: relative;

        .detail {
          padding-bottom: 10px;
          word-break: break-all;
        }

        &::before {
          position: absolute;
          content: '';
          width: 1px;
          left: -13px;
          top: -10px;
          bottom: -10px;
          border-left: 1px dashed #dbdee1;
        }

        .publish-btn {
          font-size: 12px;
          display: inline-block;
          background: #efefef;
          border-radius: 8px;
          padding: 2px 6px;
          color: #333;

          > span {
            padding-left: 4px;
          }
        }
      }

      .remark {
        color: #666666;
        font-size: 10px;
        padding-top: 10px;
      }

      // .tool-btns {
      //   --van-button-small-height: 26px;
      //   text-align: right;

      //   ::v-deep(.van-button) {
      //     margin-right: 4px;
      //     background-color: #efefef;
      //     border: none;

      //     .van-button__text {
      //       font-size: 10px;
      //     }
      //   }
      // }

      &.is-first-year {
        &:after {
          position: absolute;
          content: '';
          border-bottom: 1px #edeeef solid;
          height: 1px;
          width: 100%;
          overflow: hidden;
          left: 0;
          top: 20px;
        }
      }

      &.is-last {
        .diary-item--content {
          &::before {
            display: none;
          }
        }
      }
    }
  }
}
</style>